<!DOCTYPE html>
<html>
	<head>
		<title>后台系统</title>
		<style>
			.title {
				font-size: 60px;
				float: left;
				font-family: "华文隶书";
			}

			.right_user {
				font-size: 30px;
				float: right;
				font-family: "宋体";
			}
			.left_text{
				font-size: 50px;
				font-style: oblique;
			}
			input[type="submit"] {
			    padding: 10px 20px; /* 内边距 */
			    margin: 10px 0; /* 外边距 */
			    border: none; /* 无边框 */
			    background-color: #4CAF50; /* 按钮背景色 */
			    color: white; /* 文字颜色 */
			    font-size: 16px; /* 字体大小 */
			    font-weight: bold; /* 字体加粗 */
			    border-radius: 5px; /* 圆角边框 */
			    cursor: pointer; /* 鼠标悬停时显示指针 */
			    transition: background-color 0.3s; /* 背景色变化过渡效果 */
			  }
			
			  input[type="submit"]:hover {
			    background-color: #45a049; /* 鼠标悬停时按钮背景色 */
			  }
			
			  input[type="submit"]:active {
			    background-color: #397d3a; /* 鼠标点击时按钮背景色 */
			  }
		</style>
		<script>
			//页面加载事件，进入页面 就要异步获取数据
			window.onload = function() {
				const token = sessionStorage.getItem('authToken'); // 从sessionStorage获取token

				//发送异步请求
				fetch('http://localhost:8080/user/userInfo', {
						method: 'GET',
						headers: {
							'Authorization': token, // 在请求头中包含token
						},
					})
					.then((response) => response.json()) //将响应体中的JSON数据解析为JS对象
					.then((data) => {
						if (data.code === 1) {
							//将name 保存在sessionStorage
							sessionStorage.setItem('name', data.data.name);
							sessionStorage.setItem('userId', data.data.id);
							document.getElementById("tokenData").innerHTML = data.data.name;
						}
					})
					.catch((e) => console.log('error', e))
			}
			//退出
			function logoutFunction() {
				// 这里可以添加退出登录的逻辑，比如清除sessionStorage、localStorage等
				sessionStorage.clear();
			}
		</script>
	</head>
	<body>

		<div class="title">
			<span class="left_text">欢迎您！&nbsp;</span><span id="tokenData">Data</span>
		</div>
		<div class="right_user">
			<form id="logoutForm" action="../login.html" method="get" target="_top" onsubmit="logoutFunction()">
			    <input type="submit" value="退出">
			</form>
		</div>
	</body>
</html>